<template>
  <!-- 小说分类 -->
  <div class="novel_classify">
    <tableComponents :isHavePagination="false" :isShow="false" :isHaveExport="false" @toAdd="editNovel(true)">
      <template v-slot:table>
        <el-table ref="multipleTable" :data="list" v-loading="loading" stripe header-row-class-name="head_color"
          tooltip-effect="dark" style="width: 99.9%">
          <!-- <el-table-column type="selection" class="tc" width="35"></el-table-column> -->
          <!-- <el-table-column type="index" class="tc" width="50" label="序号" min-width="50"></el-table-column> -->

          <el-table-column label="标题" min-width="80">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>

          <el-table-column label="图片" min-width="150" align="center">
            <template slot-scope="scope">
              <div class="user_table">
                <img :src="$fnc.getImgUrl(scope.row.piclink)" style="width:150px;height:80px;" alt />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" min-width="100">
            <template slot-scope="scope">{{ scope.row.created_time | getTimeFormat }}</template>
          </el-table-column>
          <el-table-column label="更新时间" min-width="100">
            <template slot-scope="scope">{{ scope.row.update_time | getTimeFormat }}</template>
          </el-table-column>

          <el-table-column label="操作" align="center" min-width="120">
            <template slot-scope="scope">
              <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="editNovel(false,scope.row)">编辑</el-button>
              <el-button :loading="$store.state.isLoading" size="mini" @click="deleteNovel(scope.$index, scope.row.id)"
                type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog :close-on-click-modal="false" :title="label + '小说分类'" class="tl size_13" :append-to-body="true" :visible.sync="classify_show"
      width="800px">
      <el-form :model="classify" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="分类标题：" prop="title">
          <el-col :span="12">
            <el-input type="text" clearable placeholder="请输入标题" v-model="classify.title" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="分类图片：" prop="piclink">
          <el-col :span="12">
            <el-input v-model="classify.piclink" class="mar_bottom_5" disabled></el-input>
            <uploadpic :piclink="classify.piclink" :width="150" :height="150" :is_more="false" @send_pic="onSuccess"></uploadpic>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import uploadpic from "@/components/page/pic/up_pic";
  export default {
    data() {
      return {
        list: [],
        loading: true,
        classify: {
          title: "",
          piclink: ""
        },
        rules: {
          title: [{
            required: true,
            message: "请输入标题",
            trigger: "blur"
          }]
        },
        classify_show: false,
        label: "添加"
      }
    },
    components: {
      uploadpic,
    },
    methods: {
      onSuccess(pic, index) {
        this.classify.piclink = pic;
      },
      editNovel(bool, row) {
        //编辑小说分类
        if (bool) {
          this.classify = {
            title: "",
            piclink: ""
          };
          this.label = "添加";
        } else {
          this.classify = row;
          this.label = "编辑";
        }
        this.classify_show = true;
      },
      deleteNovel(index, id) {
        //删除小说分类
        this.$swal({
          title: "您确定要删除这些信息吗",
          text: "删除后将无法恢复，请谨慎操作！",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "是的，我要删除",
          cancelButtonText: "容我三思",
        }).then((willDelete) => {
          if (willDelete.value) {
            this.$api.getNovel.delNovelClassify({
              id: id
            }).then((res) => {
              if (res.data.code == 200) {
                this.$swal("删除成功！", "您已经删除了这条信息。", "success");
                this.getNovel();
              } else {
                this.$swal("删除失败！", res.data.result, "error");
                this.getNovel();
              }
            });
          }
        });
      },
      getNovel() {
        //获取小说分类
        this.$api.getNovel.getNovelClassify().then(res => {
          if (res.data.code == 200) {
            this.list = res.data.result;
          }
          this.loading = false;
        })
      },
      submitForm(formName) {
        //保存
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.label == "添加") {
              this.$api.getNovel.addNovelClassify(this.classify).then(res => {
                if (res.data.code == 200) {
                  this.$message.success("添加成功！");
                  this.classify_show = false;
                  this.getNovel();
                }else{
                  this.$message.error(res.data.result);
                }
              })
            } else {
              this.$api.getNovel.editNovelClassify(this.classify).then(res => {
                if (res.data.code == 200) {
                  this.$message.success("修改成功！");
                  this.classify_show = false;
                  this.getNovel();
                }else{
                  this.$message.error(res.data.result);
                }
              })
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },
    created() {
      this.getNovel();
    }
  }
</script>

<style>
</style>
